<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园 - 请假申请</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a90e2;
            --success-color: #2ecc71;
            --danger-color: #e74c3c;
            --text-color: #2c3e50;
            --border-color: #dcdde1;
            --background-color: #f5f6fa;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
        }

        .dashboard {
            max-width: 800px;
            margin: 0 auto;
        }

        /* 卡片样式 */
        .form-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            margin-bottom: 20px;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
        }

        .card-icon i {
            font-size: 24px;
            color: white;
        }

        .card-title {
            margin: 0;
            color: var(--text-color);
            font-size: 1.5em;
            font-weight: 600;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-color);
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 1em;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(74,144,226,0.2);
        }

        /* 错误提示样式 */
        .error {
            color: var(--danger-color);
            font-size: 0.9em;
            margin-top: 5px;
            display: none;
        }

        /* 按钮样式 */
        .btn-container {
            text-align: center;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        /* 加载动画 */
        .loading-spinner {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .dashboard {
                padding: 15px;
            }

            .form-card {
                padding: 20px;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="dashboard">
    <div class="form-card">
        <div class="card-header">
            <div class="card-icon">
                <i class="fas fa-calendar-plus"></i>
            </div>
            <h2 class="card-title">请假申请</h2>
        </div>

        <form id="leaveForm" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="courseID">请假课程</label>
                <input type="text" id="courseID" name="courseID" class="form-control" required>
                <div id="courseIDError" class="error"></div>
            </div>

            <div class="form-group">
                <label for="reason">请假事由</label>
                <input type="text" id="reason" name="reason" class="form-control" required>
                <div id="reasonError" class="error"></div>
            </div>

            <div class="form-group">
                <label for="daynum">请假天数</label>
                <input type="number" id="daynum" name="daynum" class="form-control" required min="1">
                <div id="daynumError" class="error"></div>
            </div>

            <div class="btn-container">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-paper-plane"></i> 提交申请
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 加载动画 -->
<div id="loadingSpinner" class="loading-spinner">
    <div class="spinner"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function showLoading(show) {
        if (show) {
            $("#loadingSpinner").css("display", "flex");
        } else {
            $("#loadingSpinner").hide();
        }
    }

    function validateForm() {
        let valid = true;

        // 清除之前的错误提示
        $(".error").hide().text("");

        // 获取表单值
        let courseID = $("#courseID").val().trim();
        let reason = $("#reason").val().trim();
        let daynum = $("#daynum").val();

        // 验证课程ID
        if (courseID === "") {
            $("#courseIDError").text("请假课程不能为空").show();
            valid = false;
        }

        // 验证请假事由
        if (reason === "") {
            $("#reasonError").text("请假事由不能为空").show();
            valid = false;
        }

        // 验证请假天数
        if (daynum === "") {
            $("#daynumError").text("请假天数不能为空").show();
            valid = false;
        } else if (daynum < 1) {
            $("#daynumError").text("请假天数必须大于零").show();
            valid = false;
        }

        // 如果表单无误，进行AJAX提交
        if (valid) {
            showLoading(true);
            let formData = $("#leaveForm").serialize();

            $.ajax({
                url: "applyLeave",
                type: "POST",
                data: formData,
                dataType: "json",
                success: function(response) {
                    showLoading(false);
                    if (response.result === "success") {
                        alert(response.message);
                        window.location.href = "studentIndex.jsp?page=review-leave";
                    } else {
                        alert(response.message);
                    }
                },
                error: function() {
                    showLoading(false);
                    alert("提交失败，请稍后重试");
                }
            });
        }

        return false;
    }
</script>
</body>
</html>